<template>
    <div class="blog-list" id="main" style="overflow:auto">
        <el-card class="blog-body" style="height: 20px">
                <div>
                    {{blogs.blog[0].name}}下的文章
                    {{blogs.blog[0].description}}
                </div>

        </el-card>
        <el-card  class="blog-body" v-for="(blog,i) in blogs.blog" style="border-radius: 2px;" shadow="never">
            <div class="card-title" >
                <router-link :to="{name:'blogDetail',params:{aid:blog.aid}}"   class="router">
                    {{blog.title}}
                </router-link>
            </div>
            <div class="card-meta-top">
                            <span class="card-meta-cate">
                                <i class="el-icon-position"></i>
                                 {{blog.name}}
                            </span>
                <span class="card-meta-date">
                                <i class="el-icon-time"></i>
                                {{blog.publish}}
                            </span>
            </div>
            <div class="card-img">
                <el-image
                        style="width: 100%; height: 100%"
                        :src="blog.imgUrl"
                        :fit="fit"></el-image>
            </div>

            {{blog.text}}
            <el-divider class="card-line"></el-divider>
            <ul class="card-meta-bottom">
                <li class="card-meta-label ">
                    <router-link :to="{name:'blogDetail',params:{aid:blog.aid}}"   class="router">
                        <i class="el-icon-more"></i>
                        <i class="el-icon-more"></i>
                    </router-link>
                </li>
                <li class="card-meta-label card-meta-right">
                    <i class="el-icon-chat-dot-round"></i> 0
                </li>
                <li class="card-meta-label card-meta-right">
                    <i class="el-icon-view"></i> 0
                </li>
            </ul>
        </el-card>
        <el-pagination class="blog-page"
                       background
                       layout="prev, pager, next"
                       :current-page="current"
                       :page-size="PageSize"
                       :total="total"
                       @current-change=getArticle
                       hide-on-single-page="true">
        </el-pagination>
    </div>

</template>

<script>
    import {queryArticle} from '@/api/blogweb'
    import {ref,reactive} from 'vue';
    import {useRoute} from "vue-router";
    export default {
        name: "博客分类详情页",
        setup(){
            const current =ref(1);
            const total =ref(0);
            const PageSize=ref(0);
            const blogs= reactive({blog:[]});
            const url =ref("http://img.rui61.cn/images/2020/07/11/1.md.jpg");
            const param=reactive({
                currentPage:"",aid:'',type:''
            });
            const route = useRoute();
            const mid= route.params.mid;
            const type= route.params.type;
                param.mid=mid;
                param.type=type;
                param.currentPage=current;
                queryArticle(param).then(res=>{
                    console.log(res)
                    blogs.blog = res.data.data.records;
                    total.value = res.data.data.total;
                    PageSize.value =res.data.data.size;
                });


            return {total,PageSize,blogs,current,
                url,param
            }

        }
    }
</script>

<style scoped>
    .blog-page{
        margin: 0 auto;
        text-align: center;
    }
    @media (min-width: 1800px) {
        .blog-list{
            margin-left: 25.66667%;
            width: 52.66667%;
        }
    }
    .blog-body{
        margin: 25px auto;
        padding: 15px;
        background: #fff;
        border-radius: 10px;
        margin-left:100px;
        background-color: #f2f2f2;

    }
    .blog-body /deep/.el-card{
        height: 500px;
        width: 80%;
    }


    .card-title{
        font-size: 20px;
        line-height: 1.4;


        /*font-family: Roboto,"Open Sans","Microsoft YaHei","Helvetica Neue",Oxygen,Ubuntu,Cantarell,"Fira Sans","Droid Sans","Helvetica Neue",sans-serif;*/
        /*-webkit-transition: all .24s ease;*/
        /*transition: all .24s ease;*/
        /*color: #333;*/
        /*text-decoration: none;*/
    }
    .card-title .router{
        transition: all .24s ease;
        color: #333;
        text-decoration: none;
    }
    .card-meta-top{
        margin: 10px 0;
        font-size: 13px;
        color: #8a8a8a;
    }
    .card-line {
        width: 100%;
        height: 2px;
        margin: 10px 0;
        overflow: hidden;
        font-size: 0;
        border-bottom: 1px solid #e1e1e1;
    }
    .card-meta-bottom{
        padding: 0;
        margin: 0;
        list-style: none;
    }
    .card-meta-label{
        padding: 0;
        display: inline-block;
        vertical-align: middle;
        margin-left: 10px;
        color: #8a8a8a;
        line-height: 1.3;
    }
    .card-meta-right{
        float: right;
    }
    .card-img{
        display: block;
        height: 320px;
        width: 100%;
        margin: 10px auto;
        box-sizing: border-box;
        overflow: hidden;
    }
    /*element-ui的时间戳的线  因为修改之后无效 所有加上/deep/ */
    /*.blogweb-list /deep/ .el-timeline-item__tail{*/
    /*    display:none;*/
    /*    }*/
    /*.blogweb-list /deep/.el-timeline-item__node--normal{*/
    /*    display:none;*/
    /*}*/

</style>